<template>
  <div class="zBox">
    <el-row class="makeHeader mb-10">
      <el-row
        class="mb-10"
        type="flex"
        justify="space-between"
      >
        <el-col
          class="flexCenter"
          :span="8"
          >队伍名称：<el-input
            style="flex: 1"
            v-model="teamName"
            placeholder="请输入"
          ></el-input
        ></el-col>
        <el-col
          :span="4"
          class="ta-r"
        >
          <el-button
            type="primary"
            @click="searchHandler"
            >查询</el-button
          >
          <el-button
            plain
            @click="resetHandler"
            >重置</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col
          ><el-button
            type="primary"
            @click="addHandler"
            >新增</el-button
          ></el-col
        >
      </el-row>
    </el-row>
    <el-row class="contentDiv">
      <el-table
        :data="renderData"
        style="width: 100%"
        element-loading-text="Loading"
        element-loading-spinner="el-icon-loading"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        border
        height="720"
      >
        <el-table-column
          type="index"
          label="序号"
          width="55"
        >
        </el-table-column>
        <el-table-column
          prop="teamName"
          label="队伍名称"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="principalName"
          label="责任人"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="contactNumber"
          label="联系电话"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editHandler(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              style="color: #f56c6c"
              @click="deleteTeamApi({ id: scope.row.id })"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="footerDiv mt-10">
      <el-pagination
        background
        @size-change="pageSizeChange"
        @current-change="pageNumChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
    <!-- dialog -->
    <el-dialog
      :title="editTitle"
      :visible.sync="dialogVisible"
      width="30%"
      @before-close="dialogVisible = false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal="false"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        ref="editForm"
        label-width="100px"
      >
        <el-form-item
          label="队伍名称"
          prop="teamName"
        >
          <el-input
            v-model="editForm.teamName"
            placeholder="请输入队伍名称，长度2-50个文字"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="责任人"
          prop="principalId"
        >
          <el-select
            style="width: 100%"
            v-model="editForm.principalId"
            placeholder="请选择责任人"
          >
            <el-option
              v-for="item in manOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> </el-form-item
        ><el-form-item
          label="联系电话"
          prop="contactNumber"
        >
          <el-input
            v-model="editForm.contactNumber"
            placeholder="请输入11位手机号"
          ></el-input> </el-form-item
        ><el-form-item
          label="备注"
          prop="remark"
        >
          <el-input
            v-model="editForm.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveHandler('editForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTeamPage,
  addTeam,
  updateTeam,
  deleteTeam,
} from '/src/http/backstageManage/materialDispatch/teamMg.js'
import { getEnableUserList } from '/src/http/commonApi.js'
export default {
  data() {
    return {
      renderData: [],
      teamName: '',
      isSearch: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      editTitle: '新增',
      dialogVisible: false,
      manOptions: [],
      editForm: {
        id: null,
        teamName: '',
        principalId: null,
        contactNumber: '',
        remark: '',
      },
      rules: {
        teamName: [
          { required: true, message: '请输入队伍名称', trigger: 'blur' },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个文字',
            trigger: 'blur',
          },
        ],
        principalId: [
          { required: true, message: '请选择责任人', trigger: 'change' },
        ],
        contactNumber: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
      },
    }
  },

  mounted() {
    this.getEnableUserListApi()
    this.getTeamPageApi()
  },

  methods: {
    // pageSizeChange
    pageSizeChange(v) {
      this.pageNum = 1
      this.pageSize = v
      if (this.isSearch) {
        this.getTeamPageApi(1, v, this.teamName.trim())
      } else {
        this.getTeamPageApi(1, v)
      }
    },
    // pageNumChange
    pageNumChange(v) {
      this.pageNum = v
      if (this.isSearch) {
        this.getTeamPageApi(v, this.pageSize, this.teamName.trim())
      } else {
        this.getTeamPageApi(v, this.pageSize)
      }
    },
    // 查询
    searchHandler() {
      if (this.teamName == '') {
        this.$message.warning('请输入查询条件')
      } else {
        this.isSearch = true
        this.pageNum = 1
        this.pageSize = 10
        this.getTeamPageApi(1, 10, this.teamName.trim())
      }
    },
    // 重置
    resetHandler() {
      this.teamName = ''
      this.isSearch = false
      this.pageNum = 1
      this.pageSize = 10
      this.getTeamPageApi(1, 10)
    },
    // 新增
    addHandler() {
      this.editTitle = '新增'
      this.dialogVisible = true
      this.editForm = {
        id: null,
        teamName: '',
        principalId: null,
        contactNumber: '',
        remark: '',
      }
    },
    // 编辑
    editHandler(row) {
      this.editTitle = '编辑'
      this.dialogVisible = true
      this.editForm = JSON.parse(JSON.stringify(row))
    },
    // 保存
    saveHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editTitle == '新增') {
            this.addTeamApi(this.editForm)
          } else {
            this.updateTeamApi(this.editForm)
          }
        } else {
          alert('请检查输入项是否填写完整')
          return false
        }
      })
    },
    /**
     * 接口
     */
    // 获取启用人员
    getEnableUserListApi() {
      getEnableUserList().then((res) => {
        if (res.code == 200) {
          this.manOptions = res.data
        }
      })
    },
    // 施工队伍-分页查询
    getTeamPageApi(pageNum = 1, pageSize = 10, teamName = '') {
      let params = {
        pageNum,
        pageSize,
        teamName,
      }
      getTeamPage(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total
        }
      })
    },
    // 施工队伍-新增
    addTeamApi(params) {
      addTeam(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('新增成功')
          this.pageNum = 1
          this.getTeamPageApi(1, this.pageSize, this.teamName.trim())
          this.dialogVisible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 施工队伍-编辑
    updateTeamApi(params) {
      updateTeam(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('编辑成功')
          this.getTeamPageApi(this.pageNum, this.pageSize, this.teamName.trim())
          this.dialogVisible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 施工队伍-删除
    deleteTeamApi(params) {
      this.$confirm('此操作将永久删除该队伍信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteTeam(params).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功')
              this.pageNum = 1
              this.getTeamPageApi(1, this.pageSize, this.teamName.trim())
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style lang="less" scoped>
.makeHeader,
.contentDiv,
.footerDiv {
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
}
.contentDiv {
  min-height: 600px;
}
.footerDiv {
  text-align: right;
}
.flexCenter {
  display: flex;
  align-items: center;
}
.mt-10 {
  margin-top: 10px;
}
.mb-10 {
  margin-bottom: 10px;
}
.ta-r {
  text-align: right;
}
</style>
